<!DOCTYPE html>
<html xmlns:text-align="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->


</head>
<body style="width:100%;height:500px">
<section class="el-container  is-vertical" style="height:100%;width: 100%">
    <div class="el-header" style="width: 100%;height: 10%;background: #8c939d;text-align: right">
        <label style="margin-top: 1%;float:right;">在线编译</label>
    </div>
    <div class="el-main" style="width: 100%;height: 90%">
        <div id="app">
            <el-row :gutter="40" style="width: 100%;    text-align: right; margin-left: -40px;">
                <el-button v-on:click="run">运行</el-button>
            </el-row>
            <el-row :gutter="40" style="width: 100%">
                <el-col :span="12">
                    <el-input
                            type="textarea"
                            :rows="10"
                            placeholder="请输入内容"
                            v-model="codeText"
                    >

                    </el-input>
                </el-col>
                <el-col :span="12">
                    <el-input
                            type="textarea"
                            :rows="10"

                            placeholder="结果"
                            v-model="outPutText"
                            readonly>

                    </el-input>
                </el-col>

            </el-row>

        </div>
    </div>
    </div>
</section>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            codeText: 'package com.qall;\n' +
                'public class Template {\n' +
                '    public String exec() {\n' +
                '       return "text";\n' +
                '    }\n' +
                '}',
            outPutText: ''

        },
        methods: {

            run: function () {
                let _this = this;
                let codeBase64 = window.btoa(_this.codeText);
                let postData = {
                    "baseCode": codeBase64,
                    "code": "1"
                };

                postData=JSON.stringify(postData);

                let xhr = new XMLHttpRequest();
                xhr.open("POST", "../exec", true);
                xhr.setRequestHeader("Content-type", "application/json");
                xhr.onreadystatechange = function () {
                    var XMLHttpReq = xhr;
                    if (XMLHttpReq.readyState == 4) {
                        if (XMLHttpReq.status == 200) {
                            let text = XMLHttpReq.responseText;

                            _this.outPutText = text;
                        }
                    }
                };
                xhr.send(postData);

            }
        }
    })
</script>
</body>


</html>